<template>
  <div class="article-list">
    <a-table :columns="columns" :data-source="data" bordered :rowKey="record=>record.id">
      <span slot="action" slot-scope="text, record">
        <a-button type="primary" @click="updateArticle(record.id)">修改</a-button>&nbsp;
        <a-button type="danger" @click="delArticle(record.id)">删除</a-button>
      </span>
    </a-table>
  </div>
</template>

<script>
const columns = [
  {
    title: "标题",
    dataIndex: "title",
    width: "300px",
    ellipsis: true,
    align: "center",
  },
  {
    title: "类别",
    dataIndex: "typeName",
    align: "center",
  },
  {
    title: "发布时间",
    dataIndex: "addTime",
    align: "center",
  },
  {
    title: "浏览量",
    dataIndex: "view_count",
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" },
    align: "center",
  },
];

export default {
  created() {
    this.getArticleList();
  },
  data() {
    return {
      data: [],
      columns,
    };
  },
  methods: {
    async getArticleList() {
      let res = await this.$http.get("/admin/getArticleList");
      this.data = res.data.data;
    },
    delArticle(id) {
      let _self = this;
      this.$confirm({
        title: "确定要删除这篇博客文章吗?",
        content: (h) => (
          <div style="color:red;">如果你点击OK按钮，文章将永久被删除</div>
        ),
        async onOk() {
          let res = await _self.$http.get(`/admin/delArticle?id=${id}`);
          _self.$message.success("文章删除成功");
          _self.getArticleList();
        },
        onCancel() {
          _self.$message.success("文章没有任何变化");
        },
      });
    },
    async updateArticle(id) {
      this.$router.push({
        path: `/updateArticle/${id}`,
      });
    },
  },
};
</script>

<style lang="less">
.article-list{
  .ant-table-wrapper{
    .ant-spin-container{
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>